<template>
  <el-select v-model="value" placeholder="Select" :show-arrow="false" :offset="2" filterable :filter-method="filterMethod" @change="change">
    <el-option v-for="item in options" :key="item.dictItemValue" :label="item.dictItemName" :value="item.dictItemValue" />
  </el-select>
</template>
<script setup lang="ts">
import { dwHttp } from '@/utils/http';
defineOptions({
  name: 'DwSelectTag',
});
const props = defineProps({
  modelValue: {
    type: String,
  },
  dictCode: {
    type: String,
    required: true,
  },
});
import { onBeforeMount, ref, watch } from 'vue';
const dictCode = props.dictCode;

const value = ref(props.modelValue);
const options = ref<Record<string, string>[]>([]);
const emits = defineEmits(['update:modelValue']);
onBeforeMount(async () => {
  const { data } = await dwHttp({
    isSuccessTip: false,
    url: '/admin-api/sys/dict/item/list',
    params: { dictCode: dictCode },
  });
  options.value = data as unknown as Record<string, string>[];
});

const filterMethod = (keyword: string) => {
  console.log(keyword);
};
const change = (newValue: string) => {
  emits('update:modelValue', newValue);
};
watch(
  () => props.modelValue,
  (newValue: string | undefined) => {
    value.value = newValue;
  },
  { deep: true },
);
</script>
